<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<link rel="stylesheet" href="./style.css/reheaderimg.css" />
<link rel="stylesheet" href="./font_78xmwrbhrzu/iconfont.css" />
<script src="./js/_ajax.js"></script>
<script src="./js/Cook.js"></script>

<body>
  <div class="zcc"></div>
  <div id="header">
    <div id="header_left">
      <div id="helper">帮助中心</div>
      <div id="languge">简体中文</div>
    </div>
  </div>

  <div id="content">
    <ul>
      <li style="height: 104px">
        <span>头像</span>
        <span id="flie">
          <input type="file" name="" @change="onFileChanged" />
        </span>
      </li>
      <li>
        <span>昵称</span>
        <span id="username">用户2121212&nbsp></span>
      </li>
      <p>用于在手机上"游戏中心"，"软件商店"等应用评论或发帖时展示。</p>
      <li>
        <span>姓名</span>
        <span id="name">未填写&nbsp></span>
      </li>
      <li>
        <span>性别</span>
        <span id="sex">未填写&nbsp></span>
      </li>
      <li>
        <span>生日</span>
        <span id="deta">2022-9-20&nbsp></span>
      </li>
      <p>
        姓名，性别，生日他人不可见，完善的个人信息有助于为您提供贴心的个性化服务。
      </p>
    </ul>
  </div>

  <div id="bottom">
    <p>
      © 2005 - 2022 广东欢太 版权所有 粤ICP备 14056724 号-2
      联系方式：4001-999-666
    </p>
  </div>

  <div id="zzc" style="z-index: 2">
    <h3>用户名</h3>
    <strong class="iconfont icon-close" id="del2"></strong>
    <input type="text" id="usernameinput" />
    <p id="pis">用户名为2-18位字母，数字或汉字</p>
    <div>
      <button id="no">取消</button>
      <button id="true">确定</button>
    </div>
  </div>
  <div id="xingxi" style="z-index: 2">
    <h3>编辑我的信息</h3>
    <strong class="iconfont icon-close" id="del"></strong>
    <input style="text-indent: 5px" type="text" id="usernameinput1" placeholder="姓名" />

    <div class="sex1">
      <span>性别</span>
      <span id="ospan"></span>
      <ul>
        <li>男</li>
        <li>女</li>
      </ul>
    </div>
    <div class="sex2">
      <span>生日</span><input id="deta1" style="width: 240px; margin-left: 6px; text-indent: 5px" ; type="date"
        value="2022-09-20" />
    </div>
    <p id="eorroinformtion" style="text-indent: 130px; color: red; display: none">
      命名格式错误！
    </p>
    <div id="btn">
      <button id="no1">取消</button>
      <button id="ture1">确定</button>
    </div>
  </div>
</body>
<script>
  var ospan = document.getElementById("ospan");
  var oul = document.querySelector(".sex1 ul");
  var ali = oul.children;
  const sex = document.getElementById("xingxi");
  const zzc = document.getElementById("zzc");
  const zcc = document.querySelector(".zcc");
  const name = document.getElementById("name");
  const del = document.getElementById("del");
  const del2 = document.getElementById("del2");
  const sex1 = document.getElementById("sex");
  const deta = document.getElementById("deta");
  const deta1 = document.getElementById("deta1");
  const username = document.getElementById("username");
  const usernameinput = document.getElementById("usernameinput");
  const usernameinput1 = document.getElementById("usernameinput1");
  const true1 = document.getElementById("true");
  const true2 = document.getElementById("ture1");
  const no = document.getElementById("no");
  const no1 = document.getElementById("no1");
  const pis = document.getElementById("pis");
  const eorroinformtion = document.getElementById("eorroinformtion");
  true1.onclick = function () {
    let reg = /^[a-z0-9]{2,8}|[\u4e00-\u9fa5]{2,8}$/;
    let sfinput = usernameinput.value;
    if (!reg.test(sfinput)) {
      pis.innerHTML = "格式错误!";
      pis.style.color = "red";
    } else {
      //成功
      zzc.style.display = "none";
      zcc.style.display = "none";
      username.innerHTML = usernameinput.value;
    }
  };
  true2.onclick = function () {
    let reg1 = /^[\u4e00-\u9fa5]{2,3}$/;
    let sfinput1 = usernameinput1.value;
    if (!reg1.test(sfinput1)) {
      eorroinformtion.style.display = "block";
    } else {
      sex.style.display = "none";
      zcc.style.display = "none";
      name.innerHTML = usernameinput1.value;
      sex1.innerHTML = ospan.innerHTML;
      deta.innerHTML = deta1.value;
    }
  };
  no.onclick = function () {
    zzc.style.display = "none";
    zcc.style.display = "none";
  };

  no1.onclick = function () {
    sex.style.display = "none";
    zcc.style.display = "none";
  };
  name.onclick = function () {
    sex.style.display = "block";
    zcc.style.display = "block";
    usernameinput1.value = "";
    eorroinformtion.style.display = "none";
  };
  del.onclick = function () {
    sex.style.display = "none";
    zcc.style.display = "none";
  };

  del2.onclick = function () {
    zzc.style.display = "none";
    zcc.style.display = "none";
  };
  sex1.onclick = function () {
    sex.style.display = "block";
    zcc.style.display = "block";
    usernameinput1.value = "";
    eorroinformtion.style.display = "none";
  };
  deta.onclick = function () {
    sex.style.display = "block";
    zcc.style.display = "block";
    usernameinput1.value = "";
    eorroinformtion.style.display = "none";
  };
  username.onclick = function () {
    zzc.style.display = "block";
    zcc.style.display = "block";
    usernameinput.value = "";
    pis.innerHTML = "用户名为2-18位字母，数字或汉字!";
    pis.style.color = "#ccc";
  };
  var index = 0;
  ospan.innerHTML = ali[index].innerHTML;
  ali[index].id = "active";
  var flag = 0;
  ospan.onclick = function (eve) {
    var e = eve || window.event;
    e.stopPropagation();
    if (flag === 0) {
      oul.style.display = "block";
      flag = 1;
      if (keyIndex !== undefined) {
        ali[keyIndex].className = "";
        keyIndex = undefined;
      }
    } else {
      oul.style.display = "none";
      flag = 0;
    }
  };
  document.onclick = function () {
    oul.style.display = "none";
    flag = 0;
  };

  for (var i = 0; i < ali.length; i++) {
    ali[i].index = i;

    ali[i].onmouseover = function () {
      if (keyIndex !== undefined) {
        ali[keyIndex].className = "";
      }

      this.className = "hover";

      keyIndex = this.index;
    };

    ali[i].onmouseout = function () {
      ali[keyIndex].className = "";

      keyIndex = undefined;
    };

    ali[i].onclick = function () {
      ospan.innerHTML = this.innerHTML;

      ali[index].id = "";

      this.id = "active";

      index = this.index;
    };
  }

  var keyIndex = undefined;

  document.onkeydown = function (eve) {
    if (flag === 0) return;

    var e = eve || window.event;
    var code = e.keyCode || e.which;

    if (code === 38) {
      if (keyIndex === undefined) {
        keyIndex = ali.length - 1;
      } else if (keyIndex === 0) {
        keyIndex = 0;
      } else {
        keyIndex--;
      }

      setKeyActive(keyIndex);
    }

    if (code === 40) {
      if (keyIndex === undefined) {
        keyIndex = 0;
      } else if (keyIndex === ali.length - 1) {
        keyIndex = ali.length - 1;
      } else {
        keyIndex++;
      }
      setKeyActive(keyIndex);
    }

    if (code === 13) {
      ospan.innerHTML = ali[keyIndex].innerHTML;
      ali[index].id = "";
      ali[keyIndex].id = "active";
      index = keyIndex;
      oul.style.display = "none";
      flag = 0;
    }
  };
  function setKeyActive(now) {
    for (var i = 0; i < ali.length; i++) {
      ali[i].className = "";
    }
    ali[now].className = "hover";
  }
  var Cook = getCookie("users")
  var Cook = getCookie("users")
  ajax({
    type: "get",
    url: "http://localhost:3000/myself?id=" + Cook,
    success: res => {
      console.log(res)
      if (JSON.parse(res).code != 0) {
        location.href = "http://localhost:3000/login.html"
      }
    },
    error: code => {
      console.log("error", code);
    }
  })
    ; (function () {
      ajax({
        type: "get",
        url: "http://localhost:3000/reheaderimgse",
        data: {
        },
        success: res => {
          // console.log(res)
          username.innerHTML = JSON.parse(res).age
          // console.log(username.innerHTML)
        },
        error: code => {
          console.log("error", code);
        },
      })
    })();

  // 修改后端数据部分
  true1.onclick = function () {
    // console.log(usernameinput.value.length > 0)
    // if (usernameinput.value.length <= 0) { return }
    ajax({
      type: "get",
      url: "http://localhost:3000/reheaderimgs",
      data: {
        username: usernameinput.value,
        userID: Cook,
      },
      success: res => {
        console.log(res)
        username.innerHTML = JSON.parse(res).age
        // console.log(username.innerHTML)
      },
      error: code => {
        console.log("error", code);
      },
    })
  }


  // 修改个人信息
  ture1.onclick = function () {
    // console.log(usernameinput1.value.length)
    if (usernameinput1.value.length == 0) { return }
    console.log("11")
    ajax({
      type: "get",
      url: "http://localhost:3000/reheaderimg",
      data: {
        name: usernameinput1.value,
        xingbie: ospan.innerHTML,
        shengri: deta1.value,
        userID: Cook,
      },
      success: res => {
        sex1.innerHTML = JSON.parse(res).xb;
        deta.innerHTML = JSON.parse(res).sr;
        name.innerHTML = JSON.parse(res).yhm;
      },
      error: code => {
        console.log("error", code);
      },
    })
  }


    ; (function () {
      ajax({
        type: "get",
        url: "http://localhost:3000/reheaderimgg",
        data: {
        },
        success: res => {
          sex1.innerHTML = JSON.parse(res).xb;
          deta.innerHTML = JSON.parse(res).sr;
          name.innerHTML = JSON.parse(res).yhm;
        },
        error: code => {
          console.log("error", code);
        },
      })
    })();
</script>

</html>